<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            /* 禁止选中 */
            user-select: none;
        }
        ul{
            display: none;
        }
    </style>
</head>
<body>

    <div class="menu">
        <p>请选择</p>
        <ul>
            <li>湖北</li>
            <li>湖南</li>
            <li>河北</li>
        </ul>
    </div>


    <script>

        // 事件冒泡：子元素的事件触发了父元素的同类型事件

        const oP = document.querySelector('p') ;
        const oUl = document.querySelector('ul') ;
        const oLis = oUl.querySelectorAll('li') ;

        // oP.addEventListener('click' , function(e) {
        //     if(e.stopPropagation) {
        //         e.stopPropagation();
        //     } else {
        //         e.cancelBubble = true ;
        //     }
        //     oUl.style.display = 'block'
        // })


        // for(let i = 0 ; i < oLis.length ; i++) {
        //     oLis[i].addEventListener('click' , function() {
        //         oP.innerHTML = this.innerHTML ;
        //         oUl.style.display = 'none'
        //     })
        // }


        // document.addEventListener('click' , function() {
        //     oUl.style.display = 'none'
        // })



        // 事件委托
        //     委托给谁？   p   li   document 都需要绑定事件    
        document.addEventListener('click' , function(e) {
            // 通过判断目标源来绑定实现真正的绑定
            if(e.target.tagName === 'P') {    // 标签名大写
                oUl.style.display = 'block' ;
                return 
            }


            if([...oLis].includes(e.target)) {
                oP.innerHTML = e.target.innerHTML ;
            }
            // if(e.target.tagName === 'LI') {
            //     oP.innerHTML = e.target.innerHTML ;
            //     // oUl.style.display = 'none'
            //     // return 
            // }

            oUl.style.display = 'none'


            // if(e.target.tagName === 'P') {  }
            // else if(e.target.tagName === 'LI') {}
            // else {}
        })




        // 阻止默认事件
        document.oncontextmenu = function(e) {
            alert('右键')
            e.preventDefault()
            // return false
        }



    </script>
    
</body>
</html>